<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element表格分页</title>
</head>
<link href="../js/element/index.css" rel="stylesheet">
<body>

<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[10,20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>
    </template>
</div>

<script src="../js/vue.js"></script>
<script src="../js/element/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                msg:"空白",
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                currentPage1: 1,
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    })
</script>

</body>
</html>